<template>
  <el-card v-loading="!allStepsAttached || !allStepsAttached.length">
    <HistoryTip v-if="history.show" :history="history" @requireExit="history.show=false" />
    <transition-group name="fade-out">
      <SingleStep
        v-for="(i,index) in allStepsAttached"
        :key="i.id"
        :index="index"
        :data="i"
        :show="i.show"
        :history="list"
        @itemClick="handleClick(i)"
      >
        <template #content>
          <BindConference v-if="i.bindConference" :data="i" />
          <CardDetailContent
            :users="i.info.users"
            class="single-content"
            :show-history="history.show"
            :history-records="history.records[i.id]"
            @requireRefresh="$emit('requireRefresh',index,data.id)"
            @requireDetail="u=>showUserDetail(i,u)"
            @requireEdit="v=>$emit('requireEdit',v)"
          />
        </template>
      </SingleStep>
    </transition-group>
  </el-card>
</template>

<script>
import { transition_Array } from '@/utils/data-handle'
import { attachUserPartyInfos } from './partyInfoHandle'
import { info } from '@/api/zzxt/party-join'
import { debounce } from '@/utils'
export default {
  name: 'JoinSteps',
  components: {
    SingleStep: () => import('./SingleStep'),
    CardDetailContent: () => import('./SingleStep/CardDetailContent'),
    BindConference: () => import('./SingleStep/BindConference'),
    HistoryTip: () => import('./SingleStep/History/Tip')
  },
  props: {
    userPartyInfos: { type: Array, default: () => [] }
  },
  data: () => ({
    currentStep: 999,
    list: [], // 历史信息展示
    allStepsAttached: [],
    loading: false,
    history: {
      loading: false,
      show: false,
      user: null,
      records: {} // dict<id,record>
    }
  }),
  computed: {
    storeParty() {
      return this.$store.state.partyJoin
    },
    allSteps() {
      return this.storeParty.partyJoinSteps
    },
    allStepsDict() {
      return this.storeParty.partyJoinStepsDict
    },
    requireRefresh() {
      return debounce(() => {
        this.refresh()
      }, 5e2)
    }
  },
  watch: {
    userPartyInfos: {
      handler(val) {
        this.requireRefresh()
      },
      immediate: true
    },
    allSteps: {
      handler(val) {
        if (!val || !val.length) return
        this.requireRefresh()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleClick(i) {
      this.$set(i, 'show', !i.show)
    },
    showUserDetail(item, userid) {
      const { history } = this
      history.show = true
      history.loading = true
      history.user = userid
      info({ userid })
        .then(data => {
          const dict = {}
          const list = data.model.joinInfos
          list.forEach(v => {
            const id = v.step.id
            if (!dict[id]) dict[id] = []
            dict[id].push(v)
          })
          this.history.records = dict
        })
        .finally(() => {
          history.loading = false
        })
    },
    refresh() {
      if (this.loading || !this.allSteps) return
      this.loading = true
      const list = this.allSteps.map(i => Object.assign({}, i))
      const users = this.userPartyInfos
      if (!list || !list.length) {
        return
      }
      console.log('reload JoinSteps list', list.length, users.length)
      attachUserPartyInfos(list, users)
      list.forEach(i => {
        i.show = false
        if (!i.info) i.info = { count: 0, users: [] }
      })
      const cb = () => {
        this.loading = false
        this.allStepsAttached = list
      }
      const items = this.allStepsAttached
      transition_Array(items, list, cb, 0, i => `${i.id}${i.info.count}`)
      if (this.history.show) {
        this.showUserDetail(null, this.history.user)
      }
    }
  }
}
</script>
